@import "_variables"
@import "_util";
@import "_mixins";
@import "_extend";

global-reset()

*,
*:before,
*:after
  box-sizing: border-box

html
  height: 100%
  border-top: 2px solid $color-text

body
  color: $color-text
  background-color: $color-background
  font-size: $font-size
  font-family: $font-family-body
  font-weight: 400
  line-height: $line-height
  text-rendering: geometricPrecision
  min-height: 100%
  display: flex
  flex-direction: column
  antialias()

.content
  flex: 1
  @extend $base-style

  p
    hyphens(auto)

  pre,
  code
    hyphens(manual)

  a
    text-decoration: none
    color: $color-text
    underline(5px, $color-text)
    &:hover
      background-image: linear-gradient(transparent, transparent 4px, $color-link 4px, $color-link)

  a.icon
    background: none
    &:hover
      color: $color-link

  h1 a,
  .h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a
    color: inherit
    text-decoration: none
    background: none

  h1 a:hover,
  .h1 a:hover,
  h2 a:hover,
  h3 a:hover,
  h4 a:hover,
  h5 a:hover,
  h6 a:hover
    underline(6px, $color-link)

@media (min-width: 540px)
  .image-wrap
    flex-direction: row
    margin-bottom: 2rem
    .image-block
      margin-right: 2rem
      flex: 1 0 35%
    p
      flex: 1 0 65%

.width
  width: 100%
  max-width: 39rem

@media (max-width: 480px)
  // smaller margins at smaller screen widths
  .px3
    padding-left: 1rem
    padding-right: 1rem
  .my4
    margin-top: 2rem
    margin-bottom: 2rem

@media (min-width: 480px)
  p
    text-align: justify

@import "_extend"
@import "_partial/header"
@import "_partial/post/actions_desktop"
@import "_partial/post/actions_mobile"
@import "_partial/index"
@import "_partial/article"
@import "_partial/archive"
@import "_partial/comments"
@import "_partial/footer"

// Code
@import "_highlight/" + highlight
pre
  font-family: $font-family-mono
  font-size: 13px
  padding: 10px 15px
  padding-bottom: 0
  line-height: 22px
  -webkit-border-radius: 4px
  border-radius: 4px
  border: 1px dotted #666
  overflow-x: auto
code
  -webkit-border-radius: 2px
  border-radius: 2px
  border: 1px dotted #666
  padding: 0 5px
pre code
  border: none
  display: block
  padding: 0

.highlight
  font-family: $font-family-mono;
  background: lighten($color-background, 2%)
  // color: $color-light
  -webkit-border-radius: 4px
  border-radius: 4px
  padding: 10px 15px
  overflow-x: auto
  margin: 1rem 0 1rem 0
  figcaption
    zoom: 1
    margin: -5px 0 5px
    font-size: 0.9em
    color: #999
    a
      float: right
    &:before,
      content: ""
      display: table
    &:after
      clear: both
  pre
    padding: 0
    border: none
    background: none
  table
    width: auto
  td.gutter
    text-align: right
    padding-right: 20px
    display: none

